<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板插值 组合式 API 写法</title>
</head>
<body>
<div id="app">
  <h1>{{ message}}</h1>
  <h1>{{ grate + ", " + name + "!"}}</h1>
  <h2>{{ num + 456 }}</h2>
</div>

<script type="module">
  import {createApp} from "../../../../js/vue.esm-browser.js";

  const app = createApp({
   /* setup(){
      return {
        message: "Hello, World!",
        grate:"Hi",
        name:"abcque",
        num: 123,
      }
    }*/



    setup(){
      let message = "Hello, World!"
      let grate = "Hi"
      let name = "abcque"
      let num = 123

      return {
        message,
        grate,
        name,
        num,
      }
    }

  })

  app.mount("#app")
</script>
</body>
</html>